<template>
	<view class="dx-body">
		<dx-table ref="table" :header="tableHeader" :tableParams="tableParams" :buttons="buttons" :isPagination="false"></dx-table>
		<!--  -->
		<dx-layer-form v-model="showLayerForm" :modalForm="modalForm" @success="success">
			<!-- 自定义表单 -->
			<template #form-permission_list="form">
				<dx-array v-model="form.row.permission_list"></dx-array>
			</template>
		</dx-layer-form>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const tableHeader = reactive({
	tips: '权限管理',
});
const showLayerForm = ref(false);
const modalForm = reactive({
	title: '批量添加',
	urls: {
		add: 'permission/adds',
	},
	type: 'add',
	fields: [
		{
			label: '父级权限',
			field: 'parent_id',
			component: {
				name: 'dx-tree-select',
				props: {
					placeholder: '请选择父级权限',
					nodeKey: 'permission_id',
					url: 'permission/list',
					props: {
						label: 'permission_name',
					},
				},
			},
		},
		{
			label: '名称+标识',
			field: 'permission_list',
			value: [],
			rules: [
				{
					required: true,
					message: '名称和标识不能为空',
				},
			],
		},
		{
			label: '权限类型',
			field: 'permission_type',
			value: 1,
			formatter: (res: any) => {
				return res.cellValue === 1 ? '菜单' : '接口';
			},
			component: {
				name: 'el-radio-group',
				options: [
					{
						label: '菜单',
						value: 1,
					},
					{
						label: '接口',
						value: 2,
					},
				],
			},
		},
		{
			label: '备注',
			field: 'comment',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					placeholder: '请输入备注',
				},
			},
		},
	],
});

const buttons = ref([
	'refresh',
	'add',
	'edit',
	'del',
	'toggle',
	function (h: any) {
		return h(
			ElButton,
			{
				type: 'primary',
				class: 'mt-10px',
				onClick: () => {
					showLayerForm.value = true;
				},
			},
			() => '批量添加'
		);
	},
]);
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		keyField: '_id',
	},
	treeConfig: {
		transform: true,
		rowField: 'permission_id',
		parentField: 'parent_id',
		expandAll: true,
		reserve: true,
	},
	checkboxConfig: { highlight: true },
	showOverflow: 'tooltip',
	urls: {
		index: 'permission/list',
		add: 'permission/add',
		edit: 'permission/edit',
		del: 'permission/del',
		multi: 'permission/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{
			label: '父级权限',
			field: 'parent_id',
			visible: false,
			operator: false,
			component: {
				name: 'dx-tree-select',
				props: {
					placeholder: '请选择父级权限',
					nodeKey: 'permission_id',
					url: 'permission/list',
					props: {
						label: 'permission_name',
					},
				},
			},
		},
		{
			label: '权限名称',
			treeNode: true,
			field: 'permission_name',
			align: 'left',
			width: '180px',
			operator: 'like',
			rules: [
				{
					required: true,
					message: '权限名称不能为空',
				},
			],
		},
		{
			label: '权限标识',
			field: 'permission_id',
			operator: 'like',
			rules: [
				{
					required: true,
					message: '权限标识不能为空',
				},
			],
			minWidth: '250px',
		},
		{
			label: '权限类型',
			field: 'permission_type',
			width: '80px',
			value: 1,
			formatter: (res: any) => {
				return res.cellValue === 1 ? '菜单' : '接口';
			},
			component: {
				name: 'el-radio-group',
				options: [
					{
						label: '菜单',
						value: 1,
					},
					{
						label: '接口',
						value: 2,
					},
				],
			},
		},
		{
			label: '备注',
			field: 'comment',
			operator: 'like',
			width: '180px',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					placeholder: '请输入备注',
				},
			},
		},
		{
			label: '创建时间',
			field: 'create_date',
			form: false,
			formatter: 'dxFormatDate',
			width: '180px',
		},
		{
			type: 'operate',
			label: '操作',
			width: '120px',
			fixed: 'right',
			operator: false,
			permission: ['dx-func-admin/permission/edit', 'dx-func-admin/permission/del'],
			buttons: ['edit', 'del'],
		},
	],
});
const table = ref();
onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value.getTableList();
	});
});
function success() {
	table.value.getTableList();
}
</script>
